<template>
  <!-- 商品评价 -->
  <div>
    <div class="shangpin">
      <van-icon name="arrow-left"  @click="chan2"/>
      <span>评分</span>
    </div>
    <!-- 订单信息 -->
    <div>
      <div class="ding">
        <van-icon name="notes-o" />
        <span>订单信息</span>
      </div>
      <div class="dinglist">
        <van-row>
          <van-col class="span8" span="8">商品</van-col>
          <van-col class="span14" span="14">一个很贵重的物品</van-col>
        </van-row>
        <van-row>
          <van-col class="span8" span="8">发货时间</van-col>
          <van-col class="span14" span="14">2019-9-46 13.30</van-col>
        </van-row>
        <van-row>
          <van-col class="span8" span="8">到达时间</van-col>
          <van-col class="span14" span="14">2019-9-46 13.30</van-col>
        </van-row>
      </div>
    </div>
    <!-- 服务评价 -->
    <div class="two">
      <div class="ding">
        <van-icon name="notes-o" />
        <span>服务评价</span>
      </div>
      <div class="star">
        <van-row gutter="20">
          <van-col span="8">描述相符</van-col>
          <van-col span="12">
            <van-rate
              :size="25"
              color="#ffd21e"
              void-color="#eee"
              v-model="value"
            />
          </van-col>
          <van-col span="4">10分</van-col>
        </van-row>
        <van-row gutter="20">
          <van-col span="8">物流速度</van-col>
          <van-col span="12">
            <van-rate
              :size="25"
              color="#fe8e5b"
              void-color="#eee"
              v-model="value1"
            />
          </van-col>
          <van-col span="4">10分</van-col>
        </van-row>
        <van-row gutter="20">
          <van-col span="8">服务质量</van-col>
          <van-col span="12">
            <van-rate
              :size="25"
              color="#ff5f5e"
              void-color="#eee"
              v-model="value2"
            />
          </van-col>
          <van-col span="4">10分</van-col>
        </van-row>
      </div>
    </div>
    <!-- 文本域填写 -->
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      placeholder="请填写评价"
      show-word-limit
    />
    <!-- 按钮 -->
    <div class="btnbgc">
      <van-button round type="info" block color="#003399">提交评论</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      value1: 0,
      value2: 0,
      message: ""
    };
  },
  methods : {
    chan2(){
      this.$emit("chan2")
    }
  }
};
</script>
 
<style lang = "less" scoped>
.btnbgc {
    position: fixed;
    bottom: 0;
  background-color: #fff;
  width: 100%;
  .van-button {
    width: 90%;
    margin: 0 auto;
  }
}

.van-field {
  margin-top: 0.133333rem;
  height: 1.733333rem;
}
.van-rate {
  vertical-align: -0.06rem;
}
.shangpin {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  span {
    vertical-align: 0.03rem;
  }
  .van-icon {
    float: left;
    font-size: 0.186667rem;
  }
}
.ding {
  padding: 0.066667rem 0.093333rem;
  color: #003598;
  background-color: #f4fbfe;
  .van-icon {
    vertical-align: -0.02rem;
  }
}
.dinglist {
  background-color: #fff;
  padding: 0.133333rem 0.133333rem;
  line-height: 0.266667rem;
}
.span8 {
  color: rgb(175, 172, 172);
}
.span14 {
  color: rgb(138, 136, 136);
}
.two {
  margin-top: 0.133333rem;
}
.van-row {
  padding: 0.133333rem;
}
.star {
  background-color: #fff;
}
</style>